import React, { Component } from 'react';
import { Row, Col, Spin } from 'antd';//引入蚂蚁金服的antUI组件中的row和col（栅格），管理布局
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入柱状图
import 'echarts/lib/chart/line';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import moment from 'moment';
class Test extends React.Component {
    constructor(props) {
        super(props);
        //初始化修改状态属性
        this.state = {
            xdata: ['2020-04-05 10:00:00', '2020-04-05 11:00:00', '2020-04-05 12:00:00', '2020-04-05 13:00:00'],
            seriesData: [493, 233, 455, 667],
            isLoading:true
        }
    }




    changeData() {
        const now = moment();
        var date = this.state.xdata;
        date.push(now.format('YYYY-MM-DD HH:mm:ss'));
        var datas = this.state.seriesData;
        var data = datas[datas.length - 1] + 100;
        datas.push(data);
        this.setState({
            xdata: date,
            seriesData: datas
        });
        console.log(this.state.seriesData);
    }
    componentDidMount() {
        const optionDatas = {
            
        };
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 绘制图表
        myChart.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    animation: false,
                    label: {
                        backgroundColor: '#505765'
                    }
                }
            },

            legend: {
                data: ["Test"],//Tag名称
            },
            //布局设置，类似于margin
            grid: {
                bottom: 30,
                containLabel: true,
            },
            //X轴数据设置dateArray
            xAxis: {
                type: 'category',
                data: this.state.xdata
            },
            yAxis: { type: 'value' },
            //折线图图标和线条设置以及Y轴数据设置rateArray
            series: [{
                name: 'Test',
                data: this.state.seriesData,
                type: 'line',
                smooth: true
            }]
        });
        this.timerID = setInterval(
            () => {
                this.changeData();
                // 绘制图表
                myChart.setOption({
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            animation: false,
                            label: {
                                backgroundColor: '#505765'
                            }
                        }
                    },
        
                    legend: {
                        data: ["Test"],//Tag名称
                    },
                    //布局设置，类似于margin
                    grid: {
                        bottom: 30,
                        containLabel: true,
                    },
                    //X轴数据设置dateArray
                    xAxis: {
                        type: 'category',
                        data: this.state.xdata
                    },
                    yAxis: { type: 'value' },
                    //折线图图标和线条设置以及Y轴数据设置rateArray
                    series: [{
                        name: 'Test',
                        data: this.state.seriesData,
                        type: 'line',
                        smooth: true
                    }]
                });
            },
            5000
        );
    }

    componentWillUnmount() {
        clearInterval(this.timerID);
    }
    render() {

        return (
            <div id="main"  style={{ width: 400, height: 400 }}></div>
        );
    }
}

export default Test;